<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-03-28 14:38:51
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-03-28 14:40:21
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <el-select v-model="value" placeholder="云主机监控" />
      <p style="margin-left: 50px;margin-right: 10px" size="medium">云服务商</p>
      <el-select v-model="value01" @change="CloudAccountNameChanged" placeholder="请选择">
        <el-option
          v-for="item in clusterAll"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <p style="margin-left: 50px;margin-right: 10px" size="medium">云账号</p>
      <el-select v-model="value02" placeholder="请选择">
        <template v-if="value01 == '阿里云'">
          <el-option
            v-for="item in PublicCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName" />
        </template>
        <template v-if="value01 == 'Openstack'">
          <el-option
            v-for="item in PrivateCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName" />
        </template>
      </el-select>
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-left: 50px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
        @clear="clearClick"
        @keyup.enter.native="queryClick"
      />
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button
        size="medium"
        type="primary"
        style="margin-left: 20px"
        @click="resetClick"
      >刷新</el-button>
    </MyHeader>
    <MyMain class="main">
      <el-table
        v-loading="loading"
        class="common-table"
        :data="list"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
      >
        <el-table-column prop="vmName" label="云主机名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="cloudProvider" label="云服务商" min-width="120" show-overflow-tooltip />
        <el-table-column prop="cloudAccountName" label="云账号名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="privateIp" label="私网IP" min-width="120" />
        <el-table-column prop="publicIp" label="公网IP" min-width="120" />
        <el-table-column prop="cpuUsage" label="CPU使用率" width="120" />
        <el-table-column prop="memUsage" label="内存使用率" width="120" />
        <el-table-column prop="diskUsage" label="磁盘使用率" min-width="120" />
        <el-table-column prop="status" label="状态" width="120" />
        <el-table-column prop="alarmCnt" label="告警总量" width="200">
          <template>
            <div v-for="i in 2" :key="i" style="float: left">
              <!-- <el-button type="primary" plain>提示</el-button><span>{{alarmCnt['提示']}}</span>
              <el-button v-if="'次要' in alarmCnt" type="success" plain>次要</el-button><span>{{alarmCnt.次要}}</span>
              <el-button v-if="'重要' in alarmCnt" type="warning" plain>重要</el-button><span>{{alarmCnt.重要}}</span>
              <el-button v-if="'紧急' in alarmCnt" type="danger" plain>紧急</el-button><span>{{alarmCnt.紧急}}</span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110">
          <template>
            <el-button type="primary" size="small">告警详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>
  </MyContainer>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import { CLUSTER_ALL } from '@/utils/constant.js'
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { getDetailList } from '@/api/monitor'
import { getPublicTokenList } from '@/api/cn-mgmt.js'
import { getPrivateAccountList } from '@/api/cn-mgmt'
export default {
  name: 'DetailList',
  components: {
    MyContainer,
    MyHeader,
    MyMain
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      clusterAll: CLUSTER_ALL,
      PublicCloudAccountName: [],
      PrivateCloudAccountName: [],
      value: '',
      value01: '',
      value02: ''
    }
  },
  created() {
    getPublicTokenList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PublicCloudAccountName = data
      this.value01 = CLUSTER_ALL[0].value
      this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
      this.getList()
    })
    getPrivateAccountList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PrivateCloudAccountName = data
    })
  },
  methods: {
    getList() {
      this.handleRequestAndResp(getDetailList, {
        cloudProvider: this.value01,
        cloudAccountName: this.value02,
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    CloudAccountNameChanged(){
      if (this.value01 == 'Openstack') {
        this.value02 = this.PrivateCloudAccountName.data.data[0].cloudAccountName
      }
      else if (this.value01 == '阿里云') {
        this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.detail-list-ctn {
}
</style>
